<template>
	<view>
		<view class="header">
			<text class="header-title">消息</text>
			
			<view class="cu-list grid header-all" :class="['col-' + gridCol,gridBorder?'':'no-border']">
				<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*2">
					<image :src="item.image" mode="" style="width: 92upx;height: 92upx;"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="line1"></view>
		<view>
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in list" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="cu-avatar round lg" :style="'background:url('+item.imgurl+')'"></view>
					<view class="content">
						<view class="text-grey">{{item.name}}</view>
						<view class="text-gray text-sm">
							<text class=" text-red  margin-right-xs" :class="[item.content.length? '':'cuIcon-infofill']" ></text>{{item.content}}</view>
					</view>
					<view class="action">
						<view class="text-grey time1">{{item.time}}分钟前</view>
					</view>
					<view class="move">
						<view class="bg-grey" @tap="handledata(index)">置顶</view>
						<view class="bg-red" @tap="Del(item.id)">删除</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				cuIconList: [{
					image: '../../static/images/pic56.png',
					color: 'red',
					// badge: 120,
					name: '赞'
				}, {
					image: '../../static/images/pic61.png',
					color: 'orange',
					// badge: 1,
					name: '评论'
				}, {
					image: '../../static/images/pic64.png',
					color: 'yellow',
					// badge: 0,
					name: '收藏'
				}, {
					image: '../../static/images/pic65.png',
					color: 'olive',
					// badge: 22,
					name: '粉丝'
				}
				],
				modalName: null,
				gridCol:4,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
			};
		},
		methods: {
				// ListTouch触摸开始
				ListTouchStart(e) {
					this.listTouchStart = e.touches[0].pageX
				},
		
				// ListTouch计算方向
				ListTouchMove(e) {
					this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
				},
		
				// ListTouch计算滚动
				ListTouchEnd(e) {
					if (this.listTouchDirection == 'left') {
						this.modalName = e.currentTarget.dataset.target
					} else {
						this.modalName = null
					}
					this.listTouchDirection = null
				},
				Del(id){//根据里面的唯一id删除元素
					// console.log(id)
					this.list.forEach((item,idx)=>{
						if(item.id==id){
							this.list.splice(idx,1)
						}
					})					
				},
				handledata(ind){//获取到点击元素的下标，让它开头入栈
					 this.list.unshift(this.list[ind])
					      this.list.splice(++ind, 1)
					
				}
			},
			onLoad(){
				uni.request({
					url:"http://rap2api.taobao.org/app/mock/239452/get/check",
				    method:'get',
				    success: (res) => {
						
				        if(res.data.code==1){
							this.list=res.data.data
							console.log(this.list)
						}
						
				    }
				});
				
			}
		
		
	}
</script>

<style lang="scss">
.header{
	position: relative;
	height: 333upx;
	.header-title{
		width:110upx;
		height:44upx;
		font-size:52upx;
		font-family:59;
		font-weight:800;
		color:rgba(36,38,45,1);
		line-height:48upx;
		position: absolute;
		top: 50upx;
		left: 33upx;
		z-index: 1;
	}
	.header-all{
		padding-top: 100upx;
		top: 60upx;
		>.cu-item{
			width:93upx;
			height: 200upx;
			margin-left: 80upx;
			margin-top: 60upx;
			// margin-bottom: 42upx;
		}
		text{
			font-size: 30upx;
			color: #5F5F5F;
			
		}
		
	}
}

.time1{
	margin-left: -70upx !important;
	
}
</style>
